<template>
  <el-row>
    <el-col :span="4" style="margin-right: 10px;">
      <el-form-item label="部门名称:">
        <el-input v-model="form.departmentName" clearable />
      </el-form-item>
    </el-col>

    <el-col :span="4" style="margin-right: 10px;">
      <el-form-item label="部门类型:">
        <el-select v-model="form.departmentTypeId" placeholder="请选择部门类别" clearable>
          <el-option v-for="item in TypeList" :key="item.departmentTypeId" :label="item.departmentTypeName" :value="item.departmentTypeId" />
        </el-select>
      </el-form-item>
    </el-col>

    <el-col :span="4" style="margin-right: 10px;">
      <el-form-item label="部门状态:">
        <el-select v-model="form.departmentStatus" placeholder="请选择" clearable>
          <el-option label="使用" :value="1" />
          <el-option label="禁用" :value="2" />
        </el-select>
      </el-form-item>
    </el-col>

    <el-col :span="6">
      <el-button type="danger" :icon="Search" @click="gettableData()">查询</el-button>
    </el-col>
  </el-row>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="departmentId" label="部门编号" />
    <el-table-column prop="departmentName" label="部门名称" />
    <el-table-column prop="departmentTypeName" label="部门类型" />
    <el-table-column prop="departmentStatus" label="部门状态">
      <template #default="scope">
        <el-text v-if="scope.row.departmentStatus==1">使用</el-text>
        <el-text v-else>禁用</el-text>
      </template>
    </el-table-column>
    <el-table-column label="部门全称" />
    <el-table-column prop="departmentManager" label="部门主管" />
    <el-table-column prop="financeSupervisor" label="财务主管" />
    <el-table-column prop="operator" label="操作人" />
    <el-table-column prop="operationTime" label="操作时间" >
      <template #default="scope">
        {{scope.row.operationTime.substr(0,19).replace("T"," ")}}
      </template>
    </el-table-column>
  </el-table>
   <!-- 分页 -->
   <table>
    <tr>
      <td>
        <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
        :page-sizes="[3, 5, 8, 10]" :background="true" prev-text="上一页" next-text="下一页"
        layout="total, slot, prev, pager, next"
        :total="form.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        ,每页显示{{ form.pageSize }}条,当前第{{ form.pageIndex }}/{{ form.pageCount }}页
        <el-button class="btn-prev" @click="handleCurrentChange(1)" :disabled="form.pageIndex==1">首页</el-button>
        </el-pagination>
      </td>

      <td>
        <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
        :page-sizes="[3, 5, 8, 10]" :background="true" prev-text="上一页" next-text="下一页"
        layout=" slot, sizes, jumper"
        :total="form.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        <el-button class="btn-prev" @click="handleCurrentChange(form.pageCount)" :disabled="form.pageIndex==form.pageCount">尾页</el-button>
        </el-pagination>
      </td>
    </tr>
  </table>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const route = useRoute()
const router = useRouter()
const form = reactive({
  departmentName: '',
  departmentTypeId: '',
  departmentStatus:'',
  pageIndex: 1,
  pageSize: 3,
  totalCount: 0,
  pageCount: 0,
})

//获取部门类型
const TypeList:any=ref([])
const handleDepartmentType=()=>{
  axios.get(apiUrl+'/api/Department/GetDepartmentType')
  .then(res=>{
    TypeList.value=res.data.data
  })
}

//获取部门信息
const tableData = ref([])
const gettableData = () => {
  axios.post(apiUrl+'/api/Department/GetPageDepartment', {
    pageIndex: form.pageIndex,
    pageSize: form.pageSize,
    departmentName: form.departmentName,
    departmentTypeId: form.departmentTypeId||0,
    departmentStatus: form.departmentStatus||0
  }).then(res => {
    console.log(res.data)
    tableData.value = res.data.data.list
    form.pageCount = res.data.data.pageCount;
    form.totalCount = res.data.data.totalCount;
  })
}

//分页
const handleSizeChange = (val: number) => {
  form.pageSize=val
  gettableData()
}
const handleCurrentChange = (val: number) => {
  form.pageIndex=val
  gettableData()
}

//创建生命周期函数钩
onMounted(() => {
  handleDepartmentType()
  gettableData()
})


</script>
